<template>
    <d2-container>
        <!-- 学院卡片 -->
         <el-card class="box-card">
            <el-row :gutter="15">
                <el-form ref="elForm" :model="institute" :rules="rules" size="medium" label-width="100px"
                    label-position="left">
                    <el-col :span="12">
                        <el-form-item label="添加学院" prop="instituteName">
                            <el-input v-model="institute.instituteName" placeholder="请输入学院名称" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item size="large">
                            <el-button type="primary" icon="el-icon-plus" @click="handelConfirm"> 添加 </el-button>
                            <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
                </el-row>
                <el-table
                :data="instituteList"
                border
                stripe
                max-height="430"
                style="width: 100%;">
                <el-table-column
                prop="instituteName"
                label="学院名称"
                width="120">
                </el-table-column>
                <el-table-column
                prop="instCOUNT"
                label="学院学生人数"
                width="120"
                >
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" ></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
                </el-table>
                <!-- 分页 -->
      <el-pagination
        style="padding-top: 5px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[7, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
         </el-card>
    </d2-container>
</template>

<script>
import { findInstituteList, saveInstitute, deleteInstitute } from '../../../api/institute'

export default {
  name: 'index',
  components: {},
  data () {
    return {
      institute: {
        instituteName: ''
      },
      instituteVO: {
        instituteName: '',
        instCOUNT: ''
      },
      rules: {
        field105: [{
          required: true,
          message: '请输入学院',
          trigger: 'blur'
        }]
      },
      instituteList: [],
      size: 7,
      total: 100,
      current: 1
    }
  },
  created () {
    this.getInstituteList()
  },
  methods: {
    // 当每页条数改变的时候
    handleSizeChange (val) {
      // 将value赋值给size
      this.size = val
      // 重新去后台查询数据
      this.getInstituteList()
    },
    // 当前页码改变的时候
    handleCurrentChange (val) {
      this.current = val
      this.getInstituteList()
    },
    async getInstituteList () {
      const { data } = await findInstituteList(this.current, this.size, this.instituteVO)
      console.log(data)
      this.instituteList = data.data.records
      this.total = data.data.total
    },
    handelConfirm () {
      this.$refs.elForm.validate(valid => {
        if (!valid) {
          return
        }
        this.addInstitute()
      })
    },
    // 添加学院
    async addInstitute () {
      var res = await this.$confirm(
        '此操作将添加该学院信息,是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        })
      })
      if (res === 'confirm') {
        const { data: res } = await saveInstitute(this.institute)
        console.log(res)
        if (res.code === 20000) {
          this.$notify.success({
            title: '操作成功',
            message: '学院添加成功'
          })
          this.getInstituteList()
        } else {
          return this.$message.error('学院添加失败：' + res.message)
        }
      }
    },
    resetForm () {
      // eslint-disable-next-line no-unused-expressions
      this.institute.instituteName = ''
      this.getInstituteList()
    },
    // 删除学院
    async del (id) {
      var res = await this.$confirm(
        '此操作将永久删除该学院信息,是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (res === 'confirm') {
        const { data: res } = await deleteInstitute(id)
        console.log(res)
        if (res.code === 20000) {
          this.$notify.success({
            title: '操作成功',
            message: '学院删除成功'
          })
          this.getInstituteList()
        } else {
          this.$message.console.error(res.message)
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
